<!-- 标签展示组件 -->
<template>
  <view class="tags-field-wrapper" v-for="(item, k) in state.listData" :key="item.ID">
    <view class="tag-type-name">
      <img class="tag-type-icon" :src="item.icon" />
      {{ item.name }}
    </view>
    <view class="tag-type-content">
      <template v-for="(tag, i) in item.labelList" :key="tag.TagGoupID">
        <view class="tag-content" v-if="state.tagsList.includes(tag.TagName)">
          {{ tag.TagName }}
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { reactive, computed, getCurrentInstance, onMounted } from 'vue';

import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import {
  registerTag
} from '@/api/register/index.js'

import preferenceIcon from '@/assets/image/profile-preference.png';
import selfIcon from '@/assets/image/profile-self.png';
import favorsIcon from '@/assets/image/profile-favors.png';
import { onLoad } from '@dcloudio/uni-app';

let { proxy } = getCurrentInstance()

const props = defineProps({
  tagGroup: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const state = reactive({
  tagsList: [],
  listData: [
    {
      id: 1,
      name: "交友偏好",
      maxLength: 3,
      icon: preferenceIcon,
      labelList: [],
      checkLabel: [],
    },
    {
      id: 2,
      name: "自我描述",
      maxLength: 6,
      icon: selfIcon,
      labelList: [],
      checkLabel: [],
    },
    {
      id: 3,
      name: "兴趣爱好",
      maxLength: 6,
      icon: favorsIcon,
      labelList: [],
      checkLabel: [],
    }
  ]
})

const tags = computed(() => {
  return props.tagGroup;
})

import {
  UserInfo, // 获取用户资料
} from "@/api/person/index.js"

const UserInfoData = async () => {
  let dataUserInfo = await proxy.$get(UserInfo + getAuthorization('userId'))
  if (dataUserInfo.code == 200) {
    let tagsList = dataUserInfo.data['Tags'].split(',')
    state.tagsList = tagsList
    let data = await proxy.$get(registerTag)
    if (data.code == 200) {
      state.resData = data.data
      state.listData.forEach((o, i) => {
        o.id = state.resData[i].ID
        o.name = state.resData[i].ShowName
        o.labelList = state.resData[i].Tags.slice(0, 8)
        o.len = state.resData[i].Tags.length
      })
    }
  }
}

onMounted(async () => {
  UserInfoData()
})

</script>

<style lang="scss" scoped>
.tags-field-wrapper {
  display: flex;

  //标签的类型名称容器
  .tag-type-name {
    padding-left: 20rpx;
    padding-right: 44rpx;
    color: rgba(146, 146, 146, 1);
    font-size: 28rpx;

    display: inline-flex;
    align-items: flex-start;

    //标签类型图标
    .tag-type-icon {
      height: 20rpx;
      width: 20rpx;
      margin-right: 10rpx;
      margin-top: 10rpx;
    }
  }

  //标签内容
  .tag-type-content {
    flex: 1;
    padding-right: 86rpx;
    display: flex;
    flex-wrap: wrap;

    .tag-content {
      box-sizing: border-box;
      height: 44rpx;
      min-width: 124rpx;
      padding: 0 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(38, 38, 38, 1);
      font-size: 24rpx;
      background-color: rgba(238, 238, 238, 1);
      border-radius: 4rpx;
      margin-bottom: 24rpx;
      margin-right: 24rpx;
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>